<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>11_Canvas-线连接处</title>
<style>
  body{
    margin: 0;
    padding: 0;
    background-image: url(../../images/grid.png);
  }
  canvas{
    background-color: rgba(255, 0, 0, 0.1);
  }
</style>
</head>
<body>

<canvas id="tutorial" width="300" height="300px">
  你的浏览器不兼容Canvas,请升级您的浏览器!
</canvas>
<script>
  window.onload = function(){
    // 1. 获取canvas元素
    var canvas = document.getElementById('tutorial');
    // 2. 获取绘图上下文
    var ctx = canvas.getContext('2d');

    ctx.lineWidth = 10
    ctx.lineCap = 'butt' // 线连接: butt(默认) round square

    ctx.beginPath()
    ctx.moveTo(20, 20)
    ctx.lineTo(20, 100)
    ctx.stroke()

    ctx.beginPath()
    ctx.lineCap = 'round'
    ctx.moveTo(50, 20)
    ctx.lineTo(50, 100)
    ctx.stroke()

    ctx.beginPath()
    ctx.lineCap = 'square'
    ctx.lineJoin = 'bevel' // miter  round  bevel
    ctx.moveTo(80, 20)
    ctx.lineTo(80, 100)
    ctx.lineTo(200, 20)
    ctx.stroke()
  }

</script>

</body>
</html>